<template>
    <div v-html="parsedMarkdown"></div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import MarkdownIt from 'markdown-it';
const props = defineProps({
    content: {
        type: String,
        default: ''
    }
});
// 创建 MarkdownIt 实例
const md = new MarkdownIt();

// 定义 Markdown 内容
const markdownContent = ref('');

// 解析 Markdown 内容
const parsedMarkdown = ref(md.render(markdownContent.value));

// 当 Markdown 内容更新时重新解析
const updateMarkdown = () => {
    parsedMarkdown.value = md.render(markdownContent.value);
};
watch(() => props.content, (newContent) => {
    if (newContent) {

        markdownContent.value = newContent || '';
        updateMarkdown();
    }
}, { immediate: true });
</script>